<template>
  <div class="sidebar-container">
    <vxe-menu v-model="selectNav" accordion collapse-fixed :options="menuList" @click="clickEvent" ></vxe-menu>
    <!-- 折叠控制 -->
    <div class="collapse-toggle" :style="{width:isCollapse ? '64px' : '200px'}">
      <el-radio-group v-model="isCollapse" @change="onCollapseChange" >
        <el-radio-button v-if="isCollapse" :value="false"> <vxe-icon size="medium" name="menu-unfold"></vxe-icon></el-radio-button>
        <el-radio-button v-else :value="true"> <vxe-icon size="medium" name="menu-fold"></vxe-icon></el-radio-button>
      </el-radio-group> 
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { useMenuStore } from "@/store/menu";
import type { VxeMenuEvents } from "vxe-pc-ui";
const selectNav = ref('dashboard')
// 折叠状态
const isCollapse = ref(false);
const router = useRouter();
// 使用菜单 store
const menuStore = useMenuStore();
const menuList = computed(() => menuStore.menuList || []); 

/**
 * 折叠切换
 */
const onCollapseChange = (collapsed: boolean) => {
  emit("update:collapse", collapsed); 
};

const emit = defineEmits(["update:collapse"]);
const clickEvent: VxeMenuEvents.Click = ({ menu }) => {
  router.push({ path: menu.path });
}
</script>
<style scoped lang="scss">
.collapse-toggle{
  background-color: white;
  border-top: 1px solid #c1c0c0;
  display: flex;
  justify-content: center;
  position: fixed;
  padding-top: 10px;
  bottom: 0px;
}
 :deep(.el-radio-button:first-child:last-child .el-radio-button__inner) {
    border: aliceblue !important;
}
</style>